<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>实验三图片相框</title>
    <style type="text/css">
        .box1 {
                width: 500px;
                height: 200px;
                border: 2px dotted black;
                text-align: center;
                margin: 20px auto; /*上下20px 左右自动分配*/
                font-size: 30px;
            }
        .box2 {
                border: 3px solid blueviolet;
            } 
        .photoFrame {
                background:url(photoframe.jpg);
                margin: 10px auto;
                position: relative;
                overflow: hidden;
                width: 500px;
                height: 438px;
                
            }
        img { 
                position: absolute;
                /* height: 248px; */
                width: 300px;
                left: 20%;
                top: 30%;
                
            }

    </style>
</head>
<body>
    <div class="box1">
        请将图片拖放至此处
    </div>
    <div class="box2"></div>

    <script type="text/javascript">
        window.onload = function() {
            //获取到box、box2两个div元素对象
            var box2 = document.querySelector(".box2");
            var box1 = document.querySelector(".box1");
            var count = 0;
            //创建相框元素和相框背景图片
            function photoFrame() {
                //创建photoFrame元素
                var d1 = document.createElement("div");
                d1.className = "photoFrame";//设置类名对应css的样式设置
                d1.style.marginTop = "30px";//外上边距
                d1.style.marginLeft = "5px";//左边距设置
                //创建图片元素img即相框背景图片
                var img = document.createElement("img");
                img.src = "";
                count++;
                img.id = 'img' + count;//生成图片唯一id
                d1.appendChild(img);
                return d1;
            }
            box1.ondragover = function(ev) {
            //ondragover事件在可拖动元素或选取的文本正在拖动到放置目标时触发。 释放目标触发
                ev.preventDefault();
                //阻止默认处理方式 不要阻止用户在这个元素上放置拖动的元素
            }
            box1.ondrop = function(ev) {
            //当有东西放上来的时候
                ev.preventDefault();//默认行为：以超链接的形势打开数据

                //将上一次添加的内容全部清空
                box2.innerHTML="";
                //得到文件对象
                var files = ev.dataTransfer.files;
                //循环获取添加的多张图片内容
                for (var i = 0; i < files.length; i++) {
                //获取当前文件的最新修改日期
                var lastModified = files[i].lastModifiedDate;
                //修改当前文件的最新修改日期的描述格式
                var lastModifiedStr = lastModified ? lastModified.toLocaleDateString() + ' ' + lastModified.toLocaleTimeString() : 'n/a';
                //设置图片下方状态信息栏描述内容
                var fileStatus = "<li><strong>名称：" + files[i].name + "</strong><br>类型：" + files[i].type + "<br>大小：" +
                    files[i].size + "字节<br>修改时间：" + lastModifiedStr + "</li>" + "<hr/>";
                box2.appendChild(photoFrame());
                box2.innerHTML = box2.innerHTML + fileStatus;

                //设置图片路径
                function setPath() {
                    var fd = new FileReader();
                    if (files[i].type.startsWith("image/")) /*检查是否以 "image/" 开头*/ {
                        fd.readAsDataURL(files[i]);
                        count++;
                        var id = "img" + parseInt(count - 1);
                        var img = document.getElementById(id);
                        fd.onload = function() {
                            var img = document.getElementById(id);
                            img.src = fd.result;
                        }
                    }
                }
                setPath();
            }
        }
}
    </script>
</body>
</html>
